<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入ElementUI样式 -->
    <link type="text/css" rel="stylesheet" href="./css/index.css">
    <!-- 引入Vue组件库 -->
    <script type="text/javascript" src="./js/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script type="text/javascript" src="./js/index.js"></script>
    <script type="text/javascript" src="./js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-card class="box-card">
        <el-descriptions title="用户信息" :column="3">

            <el-descriptions-item label="证件照">
                <el-upload
                        class="avatar-uploader"
                        action="upload/sure"
                        :show-file-list="false"
                        style="padding-left: 20px"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-descriptions-item>
            <el-descriptions-item label="员工名称">
                    <el-input v-model="loginAdmin.name" ></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="员工工号">{{loginAdmin.account}}</el-descriptions-item>
            <el-descriptions-item label="联系方式">
                <el-input v-model="loginAdmin.phone"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="年龄">{{loginAdmin.age}}</el-descriptions-item>
            <el-descriptions-item label="入职时间">{{loginAdmin.createTime}}</el-descriptions-item>
            <el-descriptions-item label="身份证号">
                <el-input v-model="loginAdmin.idCard"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="生日">{{loginAdmin.birthday}}</el-descriptions-item>
            <el-descriptions-item label="备注">
                <el-tag type="warning" size="mini" effect="dark" v-if="loginAdmin.status==0">在职</el-tag>
                <el-tag type="info" effect="dark" size="mini" v-if="loginAdmin.status==1">离职</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="学位信息">
                <el-select v-model="loginAdmin.education" placeholder="请选择学历">
                    <el-option v-for="edu in EduData" :label="edu.education" :value="edu.education"></el-option>
                </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="专攻方向">
                <el-input v-model="loginAdmin.major"></el-input>
            </el-descriptions-item>
        </el-descriptions>
        <div class="text item">
            <el-collapse @change="handleChange" accordion>
                <el-collapse-item title="详细信息" name="1">
                    <el-input type="textarea" v-model="loginAdmin.introduction" :autosize="{ minRows:4, maxRows: 8}" placeholder="在校任职，获奖经历等"></el-input>
                </el-collapse-item>
                <el-collapse-item title="个人信息" name="2">
                    <el-input type="textarea" v-model="loginAdmin.prize" :autosize="{ minRows: 4, maxRows: 8}" placeholder="在校任职，获奖经历等"></el-input>
                </el-collapse-item>
            </el-collapse>
        </div>
        <div style="float: right ;margin-bottom: 20px">
            <el-button type="success"  size="mini" @click="updateAdmin" >确定修改</el-button>
        </div>
    </el-card>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            loginAdmin:{},
            EduData:[], //学历信息
            imageUrl:'',
            activeNames: ['1','2']
        },
        created() {
            this.initUser();
            this.initEdu();
        },
        methods: {

            //初始化用户信息
            initUser(){
                axios.get("/login/loginAdmin").then(result=>{
                    if(result.data.code === 200){
                        this.loginAdmin = result.data.data;
                        this.imageUrl = this.loginAdmin.hardUrl;
                    }
                })
            },

            //初始化学历
            initEdu(){
                axios.get("/edu/list").then(resp=>{
                    this.EduData = resp.data.data;
                })
            },

            //修改用户信息
            updateAdmin(form){
                if(this.imageUrl != null && this.imageUrl !== ''){
                    this.loginAdmin.hardUrl = this.imageUrl;
                }
                axios.post("/admin/update",this.loginAdmin).then(resp=>{
                    if(resp.data.code === 200){
                        this.$message({
                            showClose: true,
                            message: '修改成功',
                            type: 'success'
                        });
                        this.initUser();
                    }
                })
            },


            handleChange(val) {
                console.log(val);
            },

            //上传头像
            handleAvatarSuccess(res, file) {
                this.imageUrl = res.data;
                console.log(res.data);
            },

            //上传头像的限制条件
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },

        },
    })
</script>

<style>
    #app{
        border: 1px solid #DCDFE6;
        width: 800px;
        margin: 30px auto;
        padding: 35px 35px 15px 35px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        box-shadow: 0 0 25px #909399;
    }
    .text {
        font-size: 14px;
    }

    .el-input{
        width: 80%;margin-top: -10px;
    }

    .item {
        padding: 18px 0;
    }

    .box-card {
        width: 800px;
    }
</style>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 75px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }
    .avatar {
        width: 75px;
        height: 100px;
        display: block;
    }
</style>
</body>
</html>